<template>
	<div class="main">
		<van-list v-model:loading="loading" :finished="finished" finished-text="到底啦" @load="onLoad" :immediate-check="false">
			<div class="list_container">
				<shopCard v-for="(item, index) in productList" :key="item.id" :info="item" />
			</div>
		</van-list>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import shopCard from '@/components/shopCard/index.vue';
import { List, CategoryList } from '@s/products';
const { proxy } = getCurrentInstance();
const data = reactive({
	productList: [],
	pageNum: 1,
	pageSize: 6,
	maxNum: 0,
});
const { productList, pageNum, pageSize, maxNum } = toRefs(data);
const loading = ref(false);
const finished = ref(false);

List({uid:proxy.$store.state.user.userInfo.id, pageNum: data.pageNum, pageSize: data.pageSize }).then((res) => {
	data.productList = res.data.data;
	data.maxNum = res.data.lastNum;
	data.pageNum++;
	if (data.productList.length < 6) {
			finished.value = true;
		}
});

const onLoad = () => {
	// 异步更新数据
	List({uid:proxy.$store.state.user.userInfo.id,pageNum: data.pageNum, pageSize: data.pageSize }).then((res) => {
		data.productList = [...data.productList, ...res.data.data];
		setTimeout(() => {
			loading.value = false;
		}, 100);
	});
	if (data.pageNum < data.maxNum) {
		data.pageNum++;
	} else {
		finished.value = true;
	}
	// 数据全部加载完成
	// if (list.value.length >= 40) {
	//   finished.value = true;
	// }
};

const emit = defineEmits(['isBar', 'isNav','loading']);
onMounted(() => {
	emit('isBar');
	// 初始化活动状态
	emit('isNav');
	emit('loading');
});
</script>

<style lang="scss" scoped>
.main {
}
.list_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	padding: 50px 10px 0px 10px;
	div {
		margin-bottom: 10px;
	}
}
</style>
